<template>
  <view class="member-card-page">
    <view class="form-container">
      <!-- 会员卡号输入 -->
      <view class="form-item">
        <text class="form-label">会员卡号</text>
        <input 
          class="form-input" 
          placeholder="输入卡号" 
          v-model="memberInfo.cardNo"
          type="text"
        />
      </view>
      
      <!-- 会员姓名输入 -->
      <view class="form-item">
        <text class="form-label">会员姓名</text>
        <input 
          class="form-input" 
          placeholder="输入姓名" 
          v-model="memberInfo.name"
          type="text"
        />
      </view>
      
      <!-- 手机号码输入 -->
      <view class="form-item">
        <text class="form-label">手机号码</text>
        <input 
          class="form-input" 
          placeholder="输入手机号" 
          v-model="memberInfo.phone"
          type="number"
        />
      </view>
      
      <!-- 会员性别选择 -->
      <view class="form-item radio-group-item">
        <text class="form-label">会员性别</text>
        <view class="radio-group">
          <label class="radio-label">
            <radio 
              value="male" 
              :v-model="memberInfo.gender"
              color="#ff4d4f"
            />
            <text>男</text>
          </label>
          <label class="radio-label">
            <radio 
              value="female" 
              :v-model="memberInfo.gender"
              color="#ff4d4f"
            />
            <text>女</text>
          </label>
        </view>
      </view>
      
      <!-- 卡押金信息 -->
      <view class="form-item">
        <text class="form-label">卡押金</text>
        <text class="deposit-amount">10.00</text>
      </view>
      
      <!-- 支付方式选择 -->
      <view class="form-item checkbox-group-item">
        <text class="form-label">支付方式</text>
        <view class="checkbox-group">
          <label class="checkbox-label" v-for="(method, index) in paymentMethods" :key="index">
            <checkbox 
              :value="method.value" 
              :v-model="memberInfo.paymentMethods"
              color="#ff4d4f"
            />
            <image class="payment-icon" :src="method.icon" mode="widthFix"></image>
            <text>{{ method.name }}</text>
          </label>
        </view>
      </view>
    </view>
    
    <!-- 确认开卡按钮 -->
    <button class="confirm-btn" @click="handleConfirm">确认开卡</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 会员信息
      memberInfo: {
        cardNo: '',
        name: '',
        phone: '',
        gender: '',
        paymentMethods: ['wechat', 'alipay', 'cash'] // 默认选中所有支付方式
      },
      // 支付方式列表
      paymentMethods: [
        {
          name: '微信支付',
          value: 'wechat',
          icon: '/static/images/wechat.png' // 替换为实际微信图标路径
        },
        {
          name: '支付宝支付',
          value: 'alipay',
          icon: '/static/images/alipay.png' // 替换为实际支付宝图标路径
        },
        {
          name: '现金支付',
          value: 'cash',
          icon: '/static/images/cash.png' // 替换为实际现金图标路径
        }
      ]
    };
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.memberCardRegister')
  	});
  },
  methods: {
    // 处理确认开卡
    handleConfirm() {
      // 简单表单验证
      if (!this.memberInfo.cardNo) {
        return uni.showToast({
          title: '请输入会员卡号',
          icon: 'none'
        });
      }
      
      if (!this.memberInfo.name) {
        return uni.showToast({
          title: '请输入会员姓名',
          icon: 'none'
        });
      }
      
      if (!this.memberInfo.phone || this.memberInfo.phone.length !== 11) {
        return uni.showToast({
          title: '请输入正确的手机号码',
          icon: 'none'
        });
      }
      
      if (!this.memberInfo.gender) {
        return uni.showToast({
          title: '请选择会员性别',
          icon: 'none'
        });
      }
      
      if (!this.memberInfo.paymentMethods.length) {
        return uni.showToast({
          title: '请选择支付方式',
          icon: 'none'
        });
      }
      
      // 表单验证通过，提交开卡信息
      uni.showLoading({
        title: '正在开卡...'
      });
      
      // 模拟接口请求
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '开卡成功',
          icon: 'success'
        });
        
        // 实际项目中可能会跳转到会员详情页
        // setTimeout(() => {
        //   uni.navigateBack();
        // }, 1500);
      }, 1500);
    }
  }
};
</script>

<style scoped>
/* 页面容器 */
.member-card-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 16px;
  box-sizing: border-box;
}

/* 表单容器 */
.form-container {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  margin-bottom: 30px;
}

/* 表单项样式 */
.form-item {
  display: flex;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #f5f5f5;
}

/* 最后一个表单项移除边框 */
.form-item:last-child {
  border-bottom: none;
}

/* 表单标签 */
.form-label {
  font-size: 15px;
  color: #666666;
  width: 100px;
  flex-shrink: 0;
}

/* 输入框样式 */
.form-input {
  flex: 1;
  font-size: 15px;
  color: #333333;
  padding: 0 8px;
  height: 36px;
  line-height: 36px;
}

/* 性别选择区域 */
.radio-group-item {
  align-items: flex-start;
  padding-top: 16px;
  padding-bottom: 16px;
}

.radio-group {
  flex: 1;
  display: flex;
  gap: 20px;
  padding-top: 2px;
}

.radio-label {
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #333333;
}

.radio-label radio {
  margin-right: 6px;
}

/* 押金金额样式 */
.deposit-amount {
  flex: 1;
  font-size: 15px;
  color: #ff4d4f;
  padding-left: 8px;
}

/* 支付方式选择区域 */
.checkbox-group-item {
  align-items: flex-start;
  padding-top: 16px;
  padding-bottom: 16px;
}

.checkbox-group {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding-top: 2px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #333333;
  margin-bottom: 8px;
}

.checkbox-label checkbox {
  margin-right: 6px;
}

/* 支付方式图标 */
.payment-icon {
  width: 20px;
  height: 20px;
  margin-right: 6px;
}

/* 确认按钮样式 */
.confirm-btn {
  width: 100%;
  height: 48px;
  line-height: 48px;
  background-color: #ff4d4f;
  color: #ffffff;
  font-size: 16px;
  border-radius: 8px;
  border: none;
  margin-top: 20px;
}

.confirm-btn::after {
  border: none;
}
</style>